<template>
	<view class="qiun-columns" :style="{ background: pageBg, color: pageColor }">
		<view class="header">
			<view class="img-circle1" :style="{ background: backgroundLocation }">
				<view class="img-circle2">
					<view class="img-circle3" :style="{ background: `linear-gradient(145deg, ${backgroundLocation}, ${pageBg})` }"></view>
				</view>
			</view>
		</view>
		<view class="pm2">
			<text>室内PM2.5</text>
			<text>{{ echartList[0].value }}</text>
			<text :style="{ color: echartList[0].series[0].color }">{{ echartList[0].evaluate }}</text>
			<text>更新于:{{ updateTime }}</text>
		</view>
		<view class="location" :style="{ background: backgroundLocation }">
			<image src="../../static/location.png" mode=""></image>
			<text>成都</text>
		</view>
		<view class="aqi_pm">
			<view class="">
				<text>AQI</text>
				<text>{{ outDoorData.aqi.value }}</text>
				<text>{{ outDoorData.aqi.quality }}</text>
			</view>
			<view v-if="outDoorData.polluted.show" class="">
				<text>{{ outDoorData.polluted.label }}</text>
				<text>{{ outDoorData.polluted.value }}</text>
				<text>主要污染</text>
			</view>
		</view>
		<view class="details" :style="{ background: backgroundLocation }">
			<view class="line"></view>
			室内指数
		</view>
		<view class="detail_chart">
			<view class="grid" v-for="(item, index) in echartList" :key="index">
				<view class="chartBox"><canvas :canvas-id="'canvasArcbar' + index" :id="'canvasArcbar' + index" class="charts"></canvas></view>
				<view class="title">
					<text>{{ item.value }}</text>
					<text>{{ item.unit }}</text>
					<text>{{ item.evaluate }}</text>
				</view>
			</view>
		</view>
		<!-- 		<view class="details">
			<view class="line">
			</view>
			历史数据
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
		</view> -->
		<!-- 历史数据 -->
		<!-- 		<view class="details">
			<view class="line">
			</view>
			工具箱
		</view> -->
		<!-- 
		<view class="records" style='margin-bottom:2rpx'>
			<text>详细记录</text>
			<text class="uni-icon uni-icon-forward"></text>
		</view>
		<view class="records">
			<text>专业记录</text>
			<text class="uni-icon uni-icon-forward"></text>
		</view> -->
		<view style="height:20rpx"></view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import {
		obj,
		bbj
	} from '@/common/mockdata.js';
	var _self;
	var canvaArcbar1;
	var canvaColumn = null;
	var pageBg = '';
	var pageColor = '';
	var backgroundLocation = '';
	var SENSORID = '';
	var cityCode = '';
	var Authorization = '';
	window.dosAppSdk = {
		getAirPlatformData: (f, a, b, c, d, e) => {
			Authorization = f;
			pageBg = a;
			pageColor = b;
			backgroundLocation = c;
			SENSORID = d;
			cityCode = e;
			return {
				f,
				a,
				b,
				c,
				d,
				e
			}
		}
	};
	window.dosAppSdk.getAirPlatformData(
		'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJoYWhhaGEiLCJ0ZW5hbnRDb2RlIjpudWxsLCJ0eXBlIjowLCJjbGllbnRfaWQiOiJpb3MiLCJwYXRoIjpudWxsLCJyb2xlX2lkIjpudWxsLCJhdXRob3JpemF0aW9uX2NvZGUiOiJzekZ3MlIiLCJwZXJtaXNzaW9ucyI6WyJndWVzdCJdLCJzY29wZSI6WyJhbGwiXSwiZXhwIjoyODgzMzU0NTE2LCJqdGkiOiI0MDczMTJjMC1lMjQ5LTRlOWQtYjBhMS02ZjZkZTI0MjM4OWMiLCJjbGllbnRJZCI6ImlvcyIsIm5pY2tOYW1lIjpudWxsLCJvcGVuaWQiOiIxMzk4MDkyODA0MSIsInJvbGVJZCI6bnVsbCwiYXZhdGFyIjoiL2F0b20tZmlsZS9yZXNvdXJjZS9hdmF0YXJfaW1hZ2UvNTg3NjUwZGUtN2NlNC00YzRmLTljMTktZjk1YWVjYWJkYjY0IiwibWVzc2FnZSI6bnVsbCwidXNlck5hbWUiOiJoYWhhaGEiLCJ1c2VySWQiOjEzOTgwOTI4MDQxLCJhdXRob3JpdGllcyI6WyJndWVzdCJdLCJyb2xlX25hbWUiOiJndWVzdCIsImF2YXRhcl91cmwiOiIvYXRvbS1maWxlL3Jlc291cmNlL2F2YXRhcl9pbWFnZS81ODc2NTBkZS03Y2U0LTRjNGYtOWMxOS1mOTVhZWNhYmRiNjQiLCJuaWNrX25hbWUiOm51bGwsInJvbGVOYW1lIjoiZ3Vlc3QiLCJyZXN1bHRfY29kZSI6MCwiYWNjb3VudCI6IjEzOTgwOTI4MDQxIn0.m4HwLjF5CDCqdE81Vhav8OcCvDH9DtmVpGNKi8EBN4Q',
		'#151515',
		'#ffffff',
		'#343434',
		'7700C69014E5',
		101270101)
	export default {
		data() {
			return {
				pageBg: '',
				pageColor: '',
				backgroundLocation: '',

				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				pixelRatio: 1,
				textarea: '',
				updateTime: '',
				outDoorData: {
					aqi: {
						value: 0,
						quality: '优'
					},
					polluted: {
						show: false,
						label: '',
						value: 0
					}
				},
				outDoorDataTimer: null,
				getAriPlatformCurrentDataTimer: null,
				canvasArcbar: [],
				echartList: [{
						type: 'pm25',
						label: 'PM2.5',
						value: 0,
						unit: 'ug/m³',
						evaluate: '',
						series: [{
							name: 'PM2.5',
							data: 0,
							color: '#5DC7E5'
						}]
					},
					{
						type: 'pm10',
						label: 'PM10',
						value: 0,
						unit: 'ug/m³',
						evaluate: '',
						series: [{
							name: 'PM10',
							data: 0,
							color: '#5DE59D'
						}]
					},
					{
						type: 'co2',
						label: 'CO2',
						value: 0,
						unit: 'PPM',
						evaluate: '',
						series: [{
							name: 'CO2',
							data: 0,
							color: '#5DE59D'
						}]
					},
					{
						type: 'hcho',
						label: '甲醛',
						value: 0,
						unit: 'mg/m³',
						evaluate: '',
						series: [{
							name: '甲醛',
							data: 0,
							color: '#5DC7E5'
						}]
					},
					{
						type: 'temp',
						label: '温度',
						value: 0,
						unit: '℃',
						evaluate: '',
						series: [{
							name: '温度',
							data: 0,
							color: '#5DE59D'
						}]
					},
					{
						type: 'hum',
						label: '湿度',
						value: 0,
						unit: '%RH',
						evaluate: '',
						series: [{
							name: '湿度',
							data: 0,
							color: '#5DC7E5'
						}]
					}
				]
			};
		},
		onLoad() {
			var apptimer = setInterval(() => {
				this.pageBg = pageBg || '#151515';
				this.pageColor = pageColor || '#ffffff';
				this.backgroundLocation = backgroundLocation || '#343434';
				if (Authorization) {
					clearInterval(apptimer)
					uni.setStorageSync('Authorization', Authorization)
					this.getAriPlatformCurrentData();
					this.getOutDoorAirData();
					this.getAriPlatformCurrentDataTimer = setInterval(() => {
						console.log(new Date().toLocaleTimeString())
						_self.getAriPlatformCurrentData();
					}, 10 * 1000);
					this.outDoorDataTimer = setInterval(() => {
						_self.getOutDoorAirData();
					}, 60 * 60 * 1000);
				}
			}, 100)



			console.log(this.pageBg);
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 1;
					}
				}
			});
			//#endif
			this.cWidth3 = 68; //这里要与样式的宽高对应
			this.cHeight3 = 68; //这里要与样式的宽高对应
			this.arcbarWidth = 4;
			// 柱状图
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			var ColumnB = {
				categories: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
				series: [{
						name: '优',
						data: [{
								value: 50,
								color: '#74D4B9'
							},
							{
								value: 250,
								color: '#74D4B9'
							}
						]
					},
					{
						name: '良',
						data: [{
							value: 100,
							color: '#D8E886'
						}]
					},
					{
						name: '轻度污染',
						data: [{
							value: 150,
							color: '#EFA25C'
						}]
					},
					{
						name: '中度污染',
						data: [{
							value: 200,
							color: '#E75C5F'
						}]
					},
					{
						name: '重度污染',
						data: [{
							value: 250,
							color: '#B839C3'
						}]
					},
					{
						name: '严重污染',
						data: [{
							value: 300,
							color: '#AB1A43'
						}]
					},
					{
						name: '爆表',
						data: [{
							value: 350,
							color: '#6C0724'
						}]
					}
				]
				// "series": [{
				// 		"name": "优",
				// 		"data": [{
				// 			value: 50,
				// 			color: '#74D4B9'
				// 		},{
				// 			value: 250,
				// 			color: '#74D4B9'
				// 		}]
				// 	},
				// 	{
				// 		"name": "良",
				// 		"data": [{
				// 			value: 100,
				// 			color: '#D8E886'
				// 		}]
				// 	},
				// 	{
				// 		"name": "轻度污染",
				// 		"data": [{
				// 			value: 150,
				// 			color: '#EFA25C'
				// 		}]
				// 	},
				// 	{
				// 		"name": "中度污染",
				// 		"data": [{
				// 			value: 200,
				// 			color: '#E75C5F'
				// 		}]
				// 	},
				// 	{
				// 		"name": "重度污染",
				// 		"data": [{
				// 			value: 250,
				// 			color: '#B839C3'
				// 		}]
				// 	},
				// 	{
				// 		"name": "严重污染",
				// 		"data": [{
				// 			value: 300,
				// 			color: '#AB1A43'
				// 		}]
				// 	},
				// 	{
				// 		"name": "爆表",
				// 		"data": [{
				// 			value: 350,
				// 			color: '#6C0724'
				// 		}]
				// 	},
				// ]
			};
			//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
			let Column = {
				categories: [],
				series: []
			};
			Column.categories = ColumnB.categories;
			Column.series = ColumnB.series;
			_self.textarea = JSON.stringify(ColumnB);
			//此处绘制柱状图
			// setTimeout(() => {
			// 	_self.showColumn("canvasColumn", Column);
			// })
			this.echartList.forEach((item, index) => {
				this.canvasArcbar[index] = _self.showArcbar('canvasArcbar' + index, item);
			});
		},
		onHide() {
			this.getAriPlatformCurrentDataTimer && clearInterval(this.getAriPlatformCurrentDataTimer);
			this.outDoorDataTimer && clearInterval(this.outDoorDataTimer);
			uni.removeStorage('Authorization')
		},
		methods: {
			//获取室外数据
			getOutDoorAirData() {
				var data = {
					cityCode: cityCode
					// cityCode: 101270101
				};
				this.$Req
					.get(this.$Url.airPlatform.outDoor, [data, false])
					.then(res => {
						console.log(res);
						if (res && res.data) {
							var pm25 = parseInt(res.data.pm25);
							var pm10 = parseInt(res.data.pm25);
							var pm25Class = this.evaluateColor('pm25', pm25).class;
							var pm10Class = this.evaluateColor('pm10', pm10).class;
							this.outDoorData.aqi.value = res.data.forecast[0].aqi;
							this.outDoorData.aqi.quality = res.data.quality;
							this.outDoorData.polluted.show = res.data.quality == '优' ? false : true;
							this.outDoorData.polluted.label = pm25Class >= pm10Class ? 'PM2.5' : 'PM10';
							this.outDoorData.polluted.value = pm25Class >= pm10Class ? pm25 : 'PM10';
						} else {
							console.log('获取室外空气质量数据失败，请稍后再试');
						}
					})
					.catch((e) => {
						console.log(e);
					});
			},
			// 获取空气电台数据
			getAriPlatformCurrentData() {
				var data = {
					action: {
						getDeviceRealtimeDataCommand: {
							SENSORID: SENSORID
							// SENSORID: '7700C69014E5'
						}
					}
				};
				this.$Req
					.post(this.$Url.airPlatform.current, [data, false])
					.then(res => {
						if (res && res.dataObject) {
							this.updateArcbar(res);
						} else if (res.code == 0) {
							console.log('获取室内空气质量频率过高报错')
						}
					})
					.catch(() => {
						let i = 0
						let len = obj.length
						setInterval(() => {
							let index = i % len;
							this.updateArcbar(ojb[index]);
							++i;
						}, 2000);
						console.log('获取室内空气质量数据失败，请稍后再试');
					});
			},
			updateArcbar(obj) {
				this.updateTime = obj.dataObject.createTime;
				this.echartList[0].value = obj.dataObject.pm25;
				this.echartList[0].evaluate = this.evaluateColor('pm25', obj.dataObject.pm25).evaluate;
				this.echartList[0].series[0].data = Math.min(obj.dataObject.pm25 / 500, 1);
				this.echartList[0].series[0].color = this.evaluateColor('pm25', obj.dataObject.pm25).color;

				this.echartList[1].value = obj.dataObject.pm10;
				this.echartList[1].evaluate = this.evaluateColor('pm10', obj.dataObject.pm10).evaluate;
				this.echartList[1].series[0].data = Math.min(obj.dataObject.pm10 / 500, 1);
				this.echartList[1].series[0].color = this.evaluateColor('pm10', obj.dataObject.pm10).color;

				this.echartList[2].value = obj.dataObject.co2;
				this.echartList[2].evaluate = this.evaluateColor('co2', obj.dataObject.co2).evaluate;
				this.echartList[2].series[0].data = Math.min(obj.dataObject.co2 / 4000, 1);
				this.echartList[2].series[0].color = this.evaluateColor('co2', obj.dataObject.co2).color;

				this.echartList[3].value = obj.dataObject.hcho;
				this.echartList[3].evaluate = this.evaluateColor('hcho', obj.dataObject.hcho).evaluate;
				(this.echartList[3].series[0].data = Math.min(obj.dataObject.hcho / 0.24, 1)),
				(this.echartList[3].series[0].color = this.evaluateColor('hcho', obj.dataObject.hcho).color);

				this.echartList[4].value = obj.dataObject.temp;
				this.echartList[4].evaluate = this.evaluateColor('temp', obj.dataObject.temp).evaluate;
				this.echartList[4].series[0].data = obj.dataObject.temp > 0 ? Math.min(obj.dataObject.temp / 80, 1) : Math.max(obj.dataObject
					.temp / 80, -1);
				this.echartList[4].series[0].color = this.evaluateColor('temp', obj.dataObject.temp).color;

				this.echartList[5].value = obj.dataObject.hum;
				this.echartList[5].evaluate = this.evaluateColor('hum', obj.dataObject.hum).evaluate;
				this.echartList[5].series[0].data = Math.min(obj.dataObject.hum / 100, 1);
				this.echartList[5].series[0].color = this.evaluateColor('hum', obj.dataObject.hum).color;

				this.echartList.forEach((item, index) => {
					this.canvasArcbar[index].updateData(item.series);
				});
			},
			evaluateColor(type, value) {
				if (type == 'pm25') {
					if (value <= 35) {
						return {
							class: 0,
							evaluate: '优',
							color: '#6bc271' //绿
						};
					}
					if (value <= 75) {
						return {
							class: 1,
							evaluate: '良',
							color: '#f4e893' //黄
						};
					}
					if (value <= 115) {
						return {
							class: 2,
							evaluate: '轻度污染',
							color: '#e4a568'
						};
					}
					if (value <= 150) {
						return {
							class: 3,
							evaluate: '中度污染',
							color: '#d66563'
						};
					}
					if (value <= 250) {
						return {
							class: 4,
							evaluate: '重度污染',
							color: '#854392'
						};
					}
					if (value > 250) {
						return {
							class: 5,
							evaluate: '严重污染',
							color: '#731325'
						};
					}
				}
				if (type == 'pm10') {
					if (value <= 50) {
						return {
							class: 0,
							evaluate: '优',
							color: '#6bc271' //绿
						};
					}
					if (value <= 150) {
						return {
							class: 1,
							evaluate: '良',
							color: '#f4e893' //黄
						};
					}
					if (value <= 250) {
						return {
							class: 2,
							evaluate: '轻度污染',
							color: '#e4a568' // 橙
						};
					}
					if (value <= 350) {
						return {
							class: 3,
							evaluate: '中度污染',
							color: '#d66563' //红
						};
					}
					if (value <= 420) {
						return {
							class: 4,
							evaluate: '重度污染',
							color: '#854392' //紫
						};
					}
					if (value > 420) {
						return {
							class: 5,
							evaluate: '严重污染',
							color: '#731325' //红黑
						};
					}
				}
				// co2
				if (type == 'co2') {
					if (value <= 484) {
						return {
							evaluate: '极优',
							color: '#469d69' //深绿
						};
					}
					if (value <= 799) {
						return {
							evaluate: '优',
							color: '#6bc271' //绿
						};
					}
					if (value <= 999) {
						return {
							evaluate: '良',
							color: '#f4e893' //黄
						};
					}
					if (value <= 1499) {
						return {
							evaluate: '轻度污染',
							color: '#e4a568' // 橙
						};
					}
					if (value <= 2419) {
						return {
							evaluate: '中度污染',
							color: '#d66563' //红
						};
					}
					if (value <= 3499) {
						return {
							evaluate: '重度污染',
							color: '#854392' //紫
						};
					}
					if (value > 3499) {
						return {
							evaluate: '严重污染',
							color: '#731325' //红黑
						};
					}
				}
				//HCHO甲醛
				if (type == 'hcho') {
					if (value <= 0.04) {
						return {
							evaluate: '优',
							color: '#6bc271' //绿
						};
					}
					if (value <= 0.08) {
						return {
							evaluate: '良',
							color: '#f4e893' //黄
						};
					}
					if (value <= 0.12) {
						return {
							evaluate: '轻度污染',
							color: '#e4a568' // 橙
						};
					}
					if (value <= 0.16) {
						return {
							evaluate: '中度污染',
							color: '#d66563' //红
						};
					}
					if (value <= 0.2) {
						return {
							evaluate: '重度污染',
							color: '#854392' //紫
						};
					}
					if (value > 0.2) {
						return {
							evaluate: '严重污染',
							color: '#731325' //红黑
						};
					}
				}
				// temperature
				if (type == 'temp') {
					if (value <= -20) {
						return {
							evaluate: '极寒',
							color: '#1c4073' //深深蓝
						};
					}
					if (value <= 0) {
						return {
							evaluate: '寒冷',
							color: '#3f6495' //深蓝
						};
					}
					if (value <= 10) {
						return {
							evaluate: '偏寒',
							color: '#1c4073' //蓝
						};
					}
					if (value <= 15) {
						return {
							evaluate: '偏冷',
							color: '#a3cafa' //浅蓝
						};
					}
					if (value <= 22) {
						return {
							evaluate: '天凉',
							color: '#469d69' //深绿
						};
					}
					if (value <= 28) {
						return {
							evaluate: '舒适',
							color: '#6bc271' //绿
						};
					}
					if (value <= 28) {
						return {
							evaluate: '炎热',
							color: '#f4e893' //黄
						};
					}
					if (value <= 39) {
						return {
							evaluate: '高温',
							color: '#e4a568' // 橙
						};
					}
					if (value > 39) {
						return {
							evaluate: '中度污染',
							color: '#d66563' //红
						};
					}
				}
				// 温度 humidity
				if (type == 'hum') {
					if (value <= 20) {
						return {
							evaluate: '注意加湿',
							color: '#854392' //紫
						};
					}
					if (value <= 44) {
						return {
							evaluate: '湿度偏低',
							color: '#f4e893' //黄
						};
					}
					if (value <= 65) {
						return {
							evaluate: '舒适湿度',
							color: '#6bc271' //绿
						};
					}

					if (value <= 79) {
						return {
							evaluate: '湿度偏高',
							color: '#e4a568' //橙
						};
					}
					if (value > 79) {
						return {
							evaluate: '谨防霉菌',
							color: '#d66563' //红
						};
					}
				}
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					title: 'PM2.5',
					type: 'column',
					padding: [15, 5, 0, 15],
					legend: {
						show: true,
						position: 'right',
						float: 'top',
						padding: 5,
						margin: 20,
						itemGap: 20,
						lineHeight: 11,
						margin: 0
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						rotateLabel: true,
						disableGrid: true,
						axisLineColor: '#F0F0F0',
						titleFontSize: 10,
						titleFontColor: '#ffffff'
					},

					yAxis: {
						splitNumber: 4,
						gridType: 'dash',
						data: [{
							position: 'left',
							axisLine: true,
							disableGrid: true,
							min: 0,
							max: 400,
							titleFontSize: 10,
							titleFontColor: '#ffffff',
							axisLineColor: '#F0F0F0'
							// format: (val) => {
							// 	return val.toFixed(0) + '元'
							// },
						}]
					},
					dataLabel: false,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: (_self.cWidth * _self.pixelRatio * 0.45) / chartData.categories.length
						}
					}
				});
			},
			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value;
						} else {
							return category + ' ' + item.name + ':' + item.data;
						}
					}
				});
				canvaColumn.touchLegend(e, {
					animation: true
				});
			},
			showArcbar(canvasId, chartData) {
				return new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					color: '#cc0000',
					legend: false,
					title: {
						name: chartData.series[0].name,
						color: '#cccccc',
						fontSize: 13 * _self.pixelRatio
					},
					extra: {
						arcbar: {
							type: 'circle', //整圆类型进度条图
							backgroundColor: '#666666', //整圆类型进度条图
							width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
							startAngle: 1.5 //整圆类型只需配置起始角度即可
						}
					},
					background: chartData.series[0].color,
					borderColor: '#cc0000',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth3 * _self.pixelRatio,
					height: _self.cHeight3 * _self.pixelRatio,
					dataLabel: true
				});
			}
		}
	};
</script>

<style lang="scss">
	.records {
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;

		height: 122rpx;
		line-height: 122rpx;
		margin-left: 20rpx;
	}

	.header {
		padding: 63rpx 132rpx 88rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

		.img-circle1 {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 480rpx;
			height: 480rpx;
			border-radius: 50%;

			.img-circle2 {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 409rpx;
				height: 409rpx;
				box-shadow: 0px 3rpx 4rpx 1rpx rgba(255, 255, 255, 0.75) inset;
				border-radius: 50%;

				.img-circle3 {
					width: 390rpx;
					height: 390rpx;
					border-radius: 50%;
					box-shadow: 0px 3rpx 4rpx 1rpx rgba(255, 255, 255, 0.75);
				}
			}
		}

		text {
			position: absolute;
			top: 160rpx;
			margin: auto;

			width: 100%;
			left: 303rpx;
		}
	}

	.pm2 {
		position: absolute;
		top: 0;
		letf: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;

		text {
			display: block;
		}

		text:first-child {
			margin-top: 160rpx;
			font-size: $uni-font-size-base;
		}

		text:nth-child(2) {
			font-size: 90rpx;
			height: 126rpx;
		}

		text:nth-child(3) {
			color: #e80a0a;
			margin-top: 8rpx;
			font-size: $uni-font-size-base;
		}

		text:nth-child(4) {
			color: #999999;
			font-size: $uni-font-size-sm;
		}
	}

	.location {
		display: flex;
		width: 100%;
		height: 60rpx;
		align-items: center;
		color: #ccc;
		font-size: $uni-font-size-base;

		image {
			width: 32rpx;
			height: 32rpx;
			margin: 0 13rpx 0 23rpx;
		}

		image+text {
			margin-right: 246rpx;
		}
	}

	.aqi_pm {
		width: 100%;
		height: 120rpx;

		display: flex;
		align-items: center;
		font-size: $uni-font-size-base;

		view:first-child {
			width: 374rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		view:nth-child(2) {
			width: 0rpx;
			border: 1rpx solid #151515;
			height: 60rpx;
		}

		view:last-child {
			width: 374rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}

	.details {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		color: #ccc;
		display: flex;
		align-items: center;
		font-size: 30rpx;

		.line {
			width: 0rpx;
			height: 30rpx;
			border: 2rpx solid #ccc;
			margin-left: 24rpx;
			margin-right: 10rpx;
		}
	}

	.detail_chart {
		display: flex;
		height: 504rpx;
		flex-wrap: wrap;

		.grid {
			height: 168rpx;
			width: 50%;
			display: flex;
			align-items: center;

			.chartBox {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 100%;

				.charts {
					position: absolute;
					width: 136rpx;
					height: 136rpx;
				}
			}

			.title {
				font-size: 30rpx;
				width: 50%;

				text:nth-child(2) {
					font-size: 26rpx;
					color: #999;
					margin-left: 10rpx;
				}

				text:last-child {
					display: block;
					width: 100%;
				}
			}
		}
	}

	.qiun-charts {
		width: 100%;
		height: 700upx;
	}

	.charts {
		width: 750upx;
		height: 500upx;
	}
</style>
